/**
 * @file Header
 * @author liaoxuezhi@baidu.com
 */
/* eslint-disable */

import * as React from 'react';
import * as cx from 'classnames';

import {
  Component,
  PropTypes
} from 'react';
import {findDOMNode} from 'react-dom';

import UserDropDown from './user-dropdown';
import {Link} from 'react-router';
export default class Header extends Component {
  static propTypes = {
    className: PropTypes.string,
    brandName: PropTypes.string,
    logo: PropTypes.string,
    nav: PropTypes.node,
    brand: PropTypes.node,
    linkToGroups: PropTypes.bool.isRequired
  };

  static defaultProps = {
    brandName: '志多星',
    linkToGroups: true,
    linkToPages: false,
    showEnvSwitch: false,
    unreadCount: 0
  };

  render() {
    const {
      className,
      brandName,
      logo,
      nav,
      brand,
      user,
      navOpened,
      brandLink,
      brandLinks,
      showEnvSwitch,
      showMyGroups,
      unreadCount
    } = this.props;

    return (
      <div className={cx("app-header navbar", className)}>
        <div className="navbar-header bg-dark">
          {brand}
          <div className="navbar-brand text-lt text-ellipsis">
            <img src={logo || __uri('../../static/images/logo.png')} alt="." className="logo" />

            {brandLink ? (
              <Link className="hidden-folded m-l-sm" to={brandLink}>{brandName}</Link>
            ) : (
              <span className="hidden-folded m-l-sm">{brandName}</span>
            )}
          </div>
        </div>

        <div className={cx('collapse pos-rlt navbar-collapse box-shadow bg-white-only', {
          'show': navOpened
        })}>
          {nav}

          <ul className="nav navbar-nav navbar-right">
            {
              brandLinks && brandLinks.map((item, key)=>
                /^(?:http|https)/.test(item.url) ? (
                  <li key={key}><a href={item.url}>{item.label}</a></li>
                ) : (
                  <li key={key}><Link to={item.url}>{item.label}</Link></li>
                )
              )
            }
            <li>
              <Link to="/user/msg">
                <i className="fa fa-bell-o fa-fw"></i>
                <span className="visible-xs-inline">站内信</span>
                {unreadCount ? (<span className="badge badge-sm up bg-danger pull-right-xs">{unreadCount}</span>) : null}
              </Link>
            </li>
            {user ? (
              <UserDropDown user={user} showEnvSwitch={showEnvSwitch} showMyGroups={showMyGroups} />
            ) : null}
          </ul>
        </div>
      </div>
    );
  }
}
